
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

/**
 *  https://book.flutterchina.club/chapter6/scroll_controller.html
 * CustomScrollView可以将GridView+ListView独立的可滚动组件"粘"起来，一致滑动
 *
 * Sliver版的可滚动组件和非Sliver版的可滚动组件最大的区别就是前者不包含滚动模型（自身不能再滚动）
 * ，而后者包含滚动模型
 *
 * CustomScrollView的子组件必须都是Sliver。
 */

///

class CustomScrollViewWidget extends StatefulWidget {
  final String ?text;

  CustomScrollViewWidget({this.text}) : super();

  @override
  State<StatefulWidget> createState() {
    return _CustomScrollState(text??"");
  }
}

class _CustomScrollState extends State<CustomScrollViewWidget> {
  String ? title;

  _CustomScrollState(String text) {
    title = text;
  }

  @override
  Widget build(BuildContext context) {
    return Material(
      child: CustomScrollView(
        slivers: [
          //AppBar，包含一个导航栏
        _buildSliverBar(title??""),
          SliverPadding(
            padding: EdgeInsets.all(8),
            sliver: SliverGrid(
              gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisCount: 2, //Grid按两列显示
                mainAxisSpacing: 10.0,
                crossAxisSpacing: 10.0,
                childAspectRatio: 4.0,
              ),
              delegate: new SliverChildBuilderDelegate(
                (BuildContext context, int index) {
                  //创建子widget
                  return new Container(
                    alignment: Alignment.center,
                    color: Colors.cyan[100 * (index % 9)],
                    child: new Text('grid item $index'),
                  );
                },
                childCount: 20,
              ),
            ),
          ),
          //List
          new SliverFixedExtentList(
            itemExtent: 50.0,
            delegate: new SliverChildBuilderDelegate(
                    (BuildContext context, int index) {
                  //创建列表项
                  return new Container(
                    alignment: Alignment.center,
                    color: Colors.lightBlue[100 * (index % 9)],
                    child: new Text('list item $index'),
                  );
                },
                childCount: 50 //50个列表项
            ),
          ),
        ],
      ),
    );
  }
}
//appbar状态栏
 _buildSliverBar(String title) {
  return   SliverAppBar(
    // title: Text(title),
    elevation: 20.0,
    pinned: true,
    expandedHeight: 200,
    leading: Container(
      margin: EdgeInsets.all(10),
      child: Image.asset("assets/images/icon_card.png"),
    ),
    flexibleSpace: FlexibleSpaceBar(
      titlePadding: EdgeInsets.only(left: 55,bottom: 15),//标题边距
      collapseMode: CollapseMode.pin,//视觉效果
      title: Text(title),
      background: Image.asset(
        "assets/images/iron_man.jpg",
        fit: BoxFit.cover,
      ),
    ),
  );
}
